<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_键盘事件</title>
</head>
<body>
<!--如果是HTML5则不需要写script的type,现在js已经成为标准默认的浏览器脚本了-->
<div id="up"></div>
<div id="down"></div>
<script type="text/javascript">
    window.onkeydown = function (ev) {
        //键盘的按下,在按下的一瞬间执行ev.key
        //document.body.innerText += ev.code;
        var up = document.getElementById('up');
        up.innerText += ev.key;
        console.log(ev);
    };
    window.onkeyup = function (ev) {
        //键盘抬起
        //document.body.innerText += ev.key;
    };
    window.onkeypress = function (ev) {
        //onkeypress,不显示功能键
        var down = document.getElementById('down');
        //down.innerText += ev.key;
        //String.fromCharCode(ev.charCode)为换行的意思
        down.innerText +=String.fromCharCode(ev.charCode)
        //document.body.innerText += ev.key
    }
    /*
    onkeypress和onkeydown的区别:
    1.onkeydown会先于onkeypress得到通知
    2.onkeypress无法捕获系统按键,例如ctrl,shift等
    3.onkeydown捕获的keyCode是不区分大小写的
     */
</script>
</body>
</html>